import classNames from 'classnames';
import CSSMotion from 'rc-motion';
import React from 'react';
import type { MaskProps } from '../interface';

const Mask: React.FC<MaskProps> = (props) => {
  const { prefixCls, style, open, className, motionName } = props;

  return (
    <CSSMotion
      key="mask"
      visible={open}
      motionName={motionName} //rc-dialog-fade
      removeOnLeave={true}
      // leavedClassName={`${prefixCls}-mask-hidden`}
    >
      {({ className: motionClassName, style: motionStyle }) => (
        <div
          style={{ ...motionStyle, ...style }}
          className={classNames(
            `${prefixCls}-mask`,
            className,
            motionClassName,
          )}
        />
      )}
    </CSSMotion>
  );
};

export default Mask;
